小程序-01 小程序入门
一、注册小程序
- 注册账号：mp.weixin.qq.com
- 小程序的特点：不需要安装就可以使用；
注册注意事项：在选择服务类目时，不能选择游戏，否则以后就不能修改，其他可以修改；
二、小程序目录结构
- 一个小程序主体部分由三个文件组成，必须放在项目根目录；
├── app.js # 项目入口文件，小程序逻辑
├── app.json # 小程序公共配置
└── app.wxss # 小程序公共样式表- 一个小程序页面由四个文件组成：
js ---- 页面逻辑
wxml ---- 页面结构，相当于html，在页面结构html大部分标签都不能使用；
json ---- 页面配置
wxss ---- 页面样式表
三、全局配置（配置窗口信息）
在app.json文件填写全局配置，为严格的json对象模式；
- pages：（页面路径）
（1）新建页面，以数组的形式填写，
（2）填写路径名会自动创建一个小程序页面，会自动生成四个文件，不需要手动创建
（3）在pages里，谁在第一项，谁就是第一个页面，文件名不需要写后缀；
（4）小程序中新增/减少页面都需要对pages数组修改；
- window：配置小程序的状态栏、导航条、标题、窗口背景色；（窗口表现）
常用的：
navigationBarBackgroundColor ：导航栏背景色，必须16进制；
navigationBarTextStyle : 导航栏标题颜色，仅支持black/white
navigationBarTitleText : 导航栏标题文字内容
enablePullDownRefresh ： 开启全局下拉刷新
backgroundColor : 下拉窗口的背景色（需要开启下拉刷新）
backgroundTextStyle: 下拉loading的样式，仅支持dark/light 小点的颜色;
- tabBar：导航栏，
常用选项：
color : tab文字默认颜色，仅支持16进制；
selectedColor : 文字选中时的颜色，仅支持16进制；
backgroundColor : tab背景色，仅支持16进制；
borderStyle : black/white tab上边框的颜色
list : tab列表，最少2个，最多5个；
position : bottom/top tab的位置
list为一个数组，其中的项：
pagePath : 页面路径，必须在pages有定义的
text : tab上按钮文字
iconPath : 图片路径，限制40k，不支持网络图片，建议81px*81px，当position:top时不显示icon；
selectedIconPath : 选中时图片路径；
JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。 1. 数字，包含浮点数和整数 2. 字符串，需要包裹在双引号中 3. Bool值，true 或者 false 4. 数组，需要包裹在方括号中 [] 5. 对象，需要包裹在大括号中 {} 6. Null
还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。
四、页面配置
- 在组件里的json文件里，添加app.json的window中相同的配置项；
五、wxml模板
在小程序里面，标签名字不能使用div、p、span等，
在小程序里面使用的是view、text、button、image；
在小程序里面，也是MVVM的开发模式， 提倡把渲染和逻辑分离，不要让js直接操作dom，js只需要管理状态即可；
在使用字符串插值：
，标签上使用动态属性时也需要双大括号；修改值：
this.setData({msg: 'hello'})
注意：修改值时，即使使用push方法改变原数组，也没用，不会实时更新；
六、wxss
wxss具有css大部分特性，同时wxss扩展了一些特性有
尺寸单位：
rpx： 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
如： iPhone6 上，屏幕宽度为375px，共有750个物理像素，
则750rpx = 375px = 750物理像素，
1rpx = 0.5px = 1物理像素。页面不同，换算的单位也不同；
注意：在使用px时，375px会自动转换750px；
- 样式导入
使用@import 语句导入外联样式表
@import 'common.wxss';
七、page
组件里的js文件，都由Page({})包裹，有以下属性；
- data函数
第一次渲染使用的初始数据，data数据必须是字符串、数字、布尔值、对象、数组类型的；
生命周期函数
（1）onLoad(options)：页面加载，只会调用一次，可以在onLoad的参数中获取打开当前页面路径中的参数
（2）onShow：页面显示，页面切入前台时触发；
（3）onReady：页面初次渲染完成，只会调用一次；
（4）onHide：页面隐藏，页面切入后台时触发；
（5）onUnload：页面卸载，离开当前页面触发；
页面一进入触发：onLoad、onShow、onReady;
当在tabBar中切换时，切入只会触发onShow；
- 页面事件处理函数
onPullDownRefresh()：监听用户下拉刷新事件；需要开启下拉事件；
wx.stopPullDownRefresh()，停止当前页面下拉刷新；
onReachBottom()：监听用户上拉触底事件；
onPageScroll()：监听用户滑动页面事件，会实时触发；一个参数（scrollTop）
八、事件
- 事件分类：
bind：冒泡事件，触摸子元素会触发父元素的事件；
catch：非冒泡事件；
例：bindtap='skip'、catchtap='skip'
后面也可以紧跟一个冒号；bind:tap='skip'；
注意：事件不能传参；可以通过在页面绑定id，或者通过data-，后面添加内容，在事件通过event获取；
- 事件
tap：触摸马上离开，类似click事件；
touchstart：手指触摸动作开始
touchmove：手指触摸后移动；
touchcancel：手指触摸动作打断，如来电提醒，弹窗；
touchend：手指触摸动作结束
- 监听子元素事件
给父元素绑定capture-bind:touchstart='事件名'，当触摸子元素时，则会触发该事件；